﻿<!DOCTYPE html>
<html>
    <head>
        <title>传智学员信息登记表</title>
        <style>
        body{font-size: 12px; font-family: "微软雅黑";}
        body,form,input,h1,p{padding: 0;margin: 0;border: 0;}
        .bg{
            width: 1431px;
            height: 717px;
            background: url(1.jpg) no-repeat;
            position: relative;
        }
        form{
            width: 600px;
            height: 400px;
            margin: 50px auto;
            padding-left: 30px;
            position: absolute;
            left: 48%;
            top: 10%;
        }
        h2{
            text-align: center;
            margin: 16px 20;
        }
        p span{
            width: 75px;
            display: inline-block;
            text-align: right;
            padding-right: 10px;
        }
        p input{
            width: 200px;
            height: 18px;
            border: 1px solid #38a1bf;
            padding: 2px;
        }
        .lucky input{
            width:100px;
            height: 24px;
        }
        .btn input{
            width: 100px;
            height: 30px;
            background: #93b518;
            margin-top: 20px;
            margin-left: 75px;
            border-radius: 3px;
            font-size: 18px;
            color: #fff;
        }
        </style>
    </head>
    <body>
     <div class="bg">
         <form action="#" method="get" autocomplete="off">
             <h2>传智学员信息登记表</h2>
             <p><span>用户登录名：</span><input type="text" name="user_name" value="myemail @163.com" disabled readonly />(不能修改，只能查看)</p><br/><br/>
             <p><span>真实姓名：</span><input type="text" name="real_name" pattern="^[\u4e00-\ u9fa5] {0,}$" placeholder="例如：王明" required autocomplete="/" />(必须填写，只能输入汉字)</p><br/><br/>
             <p><span>真实年龄：</span><input type="number" name="user_lage" value="24" min="5" max="120" required />(必须填写)</p><br/><br/>
             <p><span>出生日期：</span><input type="date" name="birthday" value="1990-10-1" required />(必须填写)</p><br/><br/>
             <p><span>电子邮箱：</span><input type="myemail" name="user_name" placeholder="123456 @126.com" required multiple />(必须填写)</p><br/><br/>
             <p><span>身份证号：</span><input type="text" name="card" required pattern="^\d {8,18} | [0-9x] {8,18} | [0-9x] {8,18?$}"/> (必须填写，能够以数字、字母x结尾的短身份证号)</p><br/><br/>
             <p><span>手机号：</span><input type="tel" name="telphone" pattern="^\d{11}$" required />(必须填写)</p><br/><br/>
             <p><span>个人主页：</span><input type="url" name="myurl" list="urllist" placeholder="http://www.itcast.cn" pattern="^http://({\w-}+\.)+[\w-]+(/[\w-./?%&=]*)?$"/> (请选择网址)
             <datalist id="urllist">
                 <option>http://www.itcast.cn</option>
                 <option>hhtp://www.boxuegu.com</option>
                 <option>http://www.w3school.com.cn</option>
             </datalist>
            </p><br/><br/>
            <p class="lucky"><span>幸运颜色: </span><input type="color"  name="lovecolor" value= "#fed000"/>(请选择你喜欢的颜色)</p><br/><br/><br/>
           
            <p class="btn">
                <input type="submit" value="提交"/>
                <input type="reset" value="重置"/>
            </p>
         </form>
     </div>   
    </body>
</html>
